<!--
 * @FileDescription:
 * @Author: 茆生涛
 * @Date: 2021-10-13 16:34:07
 * @LastEditors: mst
 * @LastEditTime: 2021-10-18 15:44:48
-->
<template>
  <v-container>
    <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-text-field
      v-model="name"
      :counter="10"
      :rules="nameRules"
      label="菜品名称"
      required
    ></v-text-field>

    <v-text-field
      v-model="introduction"
      :rules="introductionRules"
      label="菜品简介"
      required
    ></v-text-field>

    <v-select
      v-model="select"
      :items="foodTimeCatagory"
      :rules="[v => !!v || '请选择']"
      label="根据就餐时间选择"
      required
    ></v-select>
    <v-file-input
      show-size
      multiple
      @change="imgChange"
      label="菜品图片上传"
    ></v-file-input>
    <v-img :src="imgSrc"></v-img>
    <div class="btn-box">
      <v-btn
      :disabled="!valid"
      color="success"
      class="mr-4"
      @click="validate"
    >
      保存
    </v-btn>

    <v-btn
      color="error"
      class="mr-4"
      @click="reset"
    >
      重置
    </v-btn>
    </div>
  </v-form>
  </v-container>

</template>
<script>
import { foodTimeCatagory } from '@/config/const'
export default {
  name: 'dishDetail',
  data: () => ({
    foodTimeCatagory,
    imgSrc: 'http://lorempixel.com/400/200',
    valid: true,
    name: '',
    nameRules: [
      v => !!v || '名称是必填项',
      v => (v && v.length <= 10) || '名称文字不能大于十个'
    ],
    introduction: '',
    introductionRules: [
      v => !!v || '菜品简介为必填项'
    ],
    select: null
  }),

  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
    imgChange (file) {
      const filePath = file[0]
      const windowURL = window.URL || window.webkitURL
      const url = windowURL.createObjectURL(filePath)
      this.imgSrc = url
    },
    resetValidation () {
      this.$refs.form.resetValidation()
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-45%);
  margin: auto;
}
</style>
